<template>
  <div class="command-info glass-panel">
    <div class="panel-header">
      <h3>指令信息</h3>
      <div class="location">指令目标：西霞院</div>
    </div>
    <div class="info-content">
      <div class="command-item">
        <span class="label">目标出库流量</span>
        <span class="value">800 m³/s</span>
      </div>
      <div class="command-item">
        <span class="label">目标上下限出库流量</span>
        <span class="value">760-840 m³/s</span>
      </div>
      <div class="command-item">
        <span class="label">执行状态</span>
        <span class="value status">正常</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.glass-panel {
  background: rgba(13, 19, 35);
  border-radius: 4px;
  border: 1px solid rgba(63, 158, 255, 0.1);
  padding: 15px;
  margin-bottom: 15px;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
      rgba(63, 158, 255, 0) 0%,
      rgba(63, 158, 255, 0.3) 50%,
      rgba(63, 158, 255, 0) 100%
    );
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
      rgba(63, 158, 255, 0) 0%,
      rgba(63, 158, 255, 0.3) 50%,
      rgba(63, 158, 255, 0) 100%
    );
  }
}

.panel-header {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  
  h3 {
    color: #fff;
    font-size: 16px;
    margin: 0 0 8px;
  }
  
  .location {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
  }
}

.info-content {
  padding: 16px;
  
  .command-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .label {
      color: rgba(255, 255, 255, 0.8);
      font-size: 14px;
    }
    
    .value {
      color: #3f9eff;
      font-size: 16px;
      font-weight: 500;
      
      &.status {
        color: #67c23a;
      }
    }
  }
}
</style> 